<template>
  <div>

    <div
      class="content-box"
      style="width: 500px; position: relative; right: -550px;top: 100px;"
    >

      <el-breadcrumb-item style="font-size:18px;margin-left:40px;background:#fff;height:20px;width:450px;padding:10px;text-align: center;border-radius:20px;">添加</el-breadcrumb-item>
      <div
        class="tablebox"
        style="padding: 20px"
      >
        <el-form
          ref="editform"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名：">
            <el-input
              v-model="user.cUsername"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input
              v-model="user.cNickname"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址：">
            <el-input
              v-model="user.cEmail"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式：">
            <el-input
              v-model="user.cPhone"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="组别：">
            <el-input
              v-model="user.cGroup"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色：">
            <el-select
              v-model="user.roleId"
              onselect="true"
              placeholder="请选择角色"
              @change="handleChangeSelect(user.roleId)"
            >
              <el-option
                v-for="item in role"
                :key="item.cRoleId"
                :label="item.cRoleName"
                :value="item.cRoleId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="密码："
            prop="cPassword"
          >
            <el-input
              type="password"
              v-model="user.cPassword"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
          style="margin-left: 200px;"
          type="primary"
          @click="save()"
        >确定</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/fetch/api";


let id = 1000;
export default {
  name: "useredit",
  data() {
    return {
      form: {
        // cRoleId:"",
        cRoleName: "",
        cPermissionIds: [],
        cDetailIds: []
      },
      cDetailIds: [],
      isIndeterminate: true,
      permissions: [],
      role: api.LocalStorageService.get("role"),
      user: {
        cEmail: "",
        cGroup: "",
        cJobnumber: "",
        cNickname: "",
        cOperatorId: 0,
        cOperatorUser: "",
        cPassword: "",
        cPhone: "",
        cUserId: 0,
        cUsername: "",
        createTime: "",
        endDate: "",
        limit: 0,
        offset: 0,
        remark: "",
        role: {
          cRoleId: 0,
          cRoleName: "",
          createTime: "",
          endDate: "",
          remark: "",
          rolepermissionlist: [
            {
              cPermissionId: 0,
              cRoleId: 0,
              cRolePermissionId: 0
            }
          ],
          startDate: "",
          state: 0,
          updateTime: ""
        },
        roleId: "",
        startDate: "",
        state: 0,
        updateTime: ""
      }
    };
  },
  computed: {
    userId() {
      return this.$route.params.id;
    },
    title() {
      return this.$route.params.id ? "编辑" : "添加";
    }
  },
  methods: {
    curry(e, node) {
      if (e.target.checked) {
        node.subDetail.forEach((sub, i) => {
          node.subDetail[i].checked = true;
        });
      } else {
        node.subDetail.forEach((sub, i) => {
          node.subDetail[i].checked = false;
        });
      }
    },
    handleChangeSelect(val) {
      if (val === 2 || val === 3) {
        this.options = this.options1;
      } else {
        this.options = this.options2;
      }
      this.user.user_type = null;
      this.user.zbukrs = null;
    },
    getRole() {
      api
        .RolePage({}, { limit: 0, pageIndex: 0 })
        .then(response => {
          if (response.status === 100) {
            this.role = response.result.list;
            api.LocalStorageService.update("role", response.result.list);
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    // 获取所属权限
    getPermissionDetail() {
      api
        .PermissionPage({}, { limit: 0, pageIndex: 0 })
        .then(response => {
          if (response.status === 100) {
            response.result.list.forEach(res => {
              res.checked == 1 ? (res.checked = true) : (res.checked = false);
              res.subDetail.forEach(res => {
                res.checked == 1 ? (res.checked = true) : (res.checked = false);
              });
            });
            this.permissions = response.result.list;
            //alert(JSON.stringify(this.permissions));
            api.LocalStorageService.update("permissions", response.result.list);
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    save() {
      var reg = 11 && /^((13|14|15|17|18|19)[0-9]{1}\d{8})$/;
      var regEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      var regName = /^[0-9a-zA-Z]*$/;
      if (!this.user.cUsername) {
        this.$message.error("用户名不能为空！！！");
      } else if (!regName.test(this.user.cUsername)) {
        this.$message.error("用户名只能是字母/和数字的组合");
      } else if (!this.user.cNickname) {
        this.$message.error("姓名不能为空！！！");
      } else if (!this.user.cEmail) {
        this.$message.error("邮箱地址不能为空！！！");
      } else if (!regEmail.test(this.user.cEmail)) {
        this.$message.error("邮箱格式不正确");
      } else if (this.user.cPhone != "" && !reg.test(this.user.cPhone)) {
        this.$message.error("手机号码格式不正确");
      } else if (!this.user.roleId) {
        this.$message.error("请选择角色！！！");
      } else if (!this.user.cPassword) {
        this.$message.error("密码不能为空！！！");
      } else {
        api.AddUser(this.user).then(response => {
          if (response.status === 100) {
            this.$message.success("添加成功");
            this.$router.back();
          } else {
            this.$message.error(response.message);
          }
        });
      }
    }
  },
  watch: {
    permissions: {
      deep: true,
      immediate: true,
      handler(val) {
        this.form.cPermissionIds = [];
        this.form.cDetailIds = [];
        let isChecked = [];
        val.forEach(menu => {
          if (menu.checked) {
            this.form.cPermissionIds.push(menu.cPermissionId);
          }
          menu.subDetail.forEach((sub, i) => {
            if (menu.subDetail[i].checked == true) {
              isChecked.push(menu.subDetail[i].checked);
            }
            if (sub.checked) {
              this.form.cDetailIds.push(sub.cDetailId);
            }
          });
          if (isChecked.length == 0) {
            menu.checked = false;
          }
        });
      }
    }
  },
  mounted() {
    //      this.getPermission();
    this.getPermissionDetail();
  },
  components: {}
};
</script>
<style lang="less" scoped>
</style>
